<script>
/**
 * @desc 行程页面
 */

import { mapState, mapActions } from 'vuex'
import { navTo } from '@/utils'
import EmptyTips from '@/components/empty-tips'

export default {
  name: 'my-travel',
  components: { EmptyTips },
  computed: {
    ...mapState({
      isLogin: root => root.SignIn.isLogin,
      list: root => root.MyTravel.travels
    })
  },
  methods: {
    ...mapActions({
      getTravels: 'MyTravel/getTravels',
      getMoreTravels: 'MyTravel/getMoreTravels'
    }),

    handleClick(id) {
      navTo({ name: 'my-travel-schedules', query: { id } })
    },

    handleRefresh() {
      wx.showLoading({ title: '加载中...', mask: true })
      this.getTravels().finally(() => wx.hideLoading())
    },
    handleLoadMore() {
      if (this.hasNext) {
        wx.showLoading({ title: '加载中...', mask: true })
        this.getMoreTravels().finally(() => wx.hideLoading())
      }
    }
  }
}
</script>

<template>
  <div class="my-travel">
    <scroll-view
      scroll-y
      :upper-threshold="-50"
      :lower-threshold="-50"
      @scrolltoupper="handleRefresh"
      @scrolltolower="handleLoadMore"
      class="route-list-view"
    >
      <div
        v-if="list"
        v-for="v in list"
        :key="v.id"
        class="route-item"
        @click="handleClick(v.id)"
      >
        <div class="preview-wrap">
          <img :src="v.picture" class="preview" mode="aspectFill">
          <div class="info-bar">
            <span class="date">{{v.date}}</span>
            <span class="status">{{v.status}}</span>
          </div>
        </div>
        <p class="name">{{v.name}}</p>
      </div>

      <empty-tips v-if="!list.length" text="您还没有正在进行的行程." />
    </scroll-view>
  </div>
</template>

<style lang="scss">
@import './styles.scss';
</style>
